<template>
    <el-dialog
      :title="!dataForm.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="160px"
      >
        <el-form-item label="标题" prop="name">
          <el-input v-model="dataForm.name" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <!-- <el-input v-model="dataForm.headPhoto" placeholder="封面"></el-input> -->
          <el-upload
            class="avatar-uploader"
            :action="url"
            ref="upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="跳转地址" prop="url">
          <el-select v-model="dataForm.url" placeholder="请选择">
            <el-option
              v-for="item in urlOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否展示首页" prop="sfzs">
          <!-- <el-input v-model="dataForm.status" placeholder="状态"></el-input> -->
          <el-select v-model="dataForm.sfzs" placeholder="请选择">
            <el-option
              v-for="item in sfzsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="sfsj">
          <!-- <el-input v-model="dataForm.status" placeholder="状态"></el-input> -->
          <el-select v-model="dataForm.sfsj" placeholder="请选择">
            <el-option
              v-for="item in sfsjOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="jj">
        <el-input v-model="dataForm.jj" placeholder="简介"></el-input>
      </el-form-item>
        <el-form-item label="内容">
          <!-- <el-input v-model="dataForm.text" placeholder="内容"></el-input> -->
          <quill-editor v-model="content" :options="quillConfig"></quill-editor>
          <!-- <quill-editor style="height: 500px; overflow-y: hidden;"
            v-model="content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated" /> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </template>
   
  <script>
  import Vue from "vue";
  import lodashGet from "lodash/get";
  import quillConfig from '@/utils/quillConfig'
  import { wangEditor } from 'wangeditor'
  
  export default {
    components: {
      wangEditor
      },
    data() {
      return {
        editor: null,
      toolbarConfig: { },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
      content: '<p>hello</p>',
        fileList3:[],
        dialogImageUrlss: "",
        dialogVisibless: false,
        url: "",
        imageUrl: "",
        visible: false,
        dialogImageUrl: "",
        dialogVisible: false,
        disabled: false,
        imagesList: [],
        dataForm: {
          id: "",
          name: "",
          text: "",
          sfsj: "",
          url:"",
          sfzs:"",
          phone:"",
          jj:""
        },
        sfsjOptions: [
          {
            value: 1,
            label: "上架"
          },
          {
            value: 0,
            label: "下架"
          }
        ],
        urlOptions: [
          {
            value: '',
            label: "无"
          },
          {
            value: '/pages/scenic/details/index',
            label: "详情"
          }
        ],
        sfzsOptions:[
          {
            value: 0,
            label: "否"
          },
          {
            value: 1,
            label: "是"
          }
        ],
        dataRule: {
          name: [{ required: true, message: "标题不能为空", trigger: "blur" }],
          text: [{ required: true, message: "内容不能为空", trigger: "blur" }],
          sfsj: [{ required: true, message: "状态不能为空", trigger: "blur" }],
          jj: [{ required: true, message: "简介不能为空", trigger: "blur" }],
          url: [{ required: true, message: "请选择跳转地址", trigger: "blur" }],
          sfzs: [{ required: true, message: "请选择跳是否展示", trigger: "blur" }],
  
        }
      };
    },
    methods: {
      onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
      inputChangezj(data) {
        var min = 1;
        if (Number(this.dataForm.zj.replace(/[^\d]/g, "")) < min) {
          this.dataForm.zj = min;
        } else {
          this.dataForm.zj = this.dataForm.zj.replace(/[^\d]/g, "");
        }
      },
      inputChangedj(data) {
        var min = 1;
        if (Number(this.dataForm.dj.replace(/[^\d]/g, "")) < min) {
          this.dataForm.dj = min;
        } else {
          this.dataForm.dj = this.dataForm.dj.replace(/[^\d]/g, "");
        }
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.dataForm.phone = res.url;
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 5;
  
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 5MB!");
        }
        return isLt2M;
      },
      handleAvatarSuccesses(res, file, fileList) {
        this.imagesList.push(res.url);
        console.log(res);
      },
      handleRemovess(file, fileList) {
        let fileUrl = lodashGet(file, ["response", "url"], "");
        if (fileUrl) {
          this.imagesList = this.imagesList.filter(item => item !== fileUrl);
        }
        console.log(file, fileList);
        console.log(this.imagesList);
      },
      handlePictureCardPreviewss(file) {
        this.dialogImageUrlss = file.url;
        this.dialogVisibless = true;
      },
      init(id) {
        this.quillConfig = quillConfig
        this.url = this.$http.adornUrl(
          `app/oss/upload?token=${this.$cookie.get("token")}`
        );
        this.dataForm.id = id || "";
        this.visible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].resetFields();
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(
                `sys/ywgl/info?id=${this.dataForm.id}`
              ),
              method: "get",
              params: this.$http.adornParams()
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.dataForm = data.ywgl;
                this.content = data.ywgl.text
                this.imageUrl = 'https://yunchenbucket.oss-cn-qingdao.aliyuncs.com/' + data.ywgl.phone
              }
            });
          }
        });
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            if (this.dataForm.id) {
              this.$http({
                url: this.$http.adornUrl(`sys/ywgl/update`),
                method: "post",
                data: this.$http.adornData({
                  id: this.dataForm.id,
                  name: this.dataForm.name,
                  text: this.content,
                  phone: this.dataForm.phone,
                  sfsj: this.dataForm.sfsj,
                  sfzs: this.dataForm.sfzs,
                  url: this.dataForm.url,
                  jj:this.dataForm.jj
                })
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                    onClose: () => {
                      this.imagesList = []
                      this.fileList3 = []
                      this.imageUrl = ''
                      this.$refs.upload.clearFiles();
                      this.visible = false;
                      this.$emit("refreshDataList");
                    }
                  });
                } else {
                  this.$message.error(data.msg);
                }
              });
            } else {
              this.$http({
                url: this.$http.adornUrl(`sys/ywgl/save`),
                method: "post",
                data: this.$http.adornData({
                  id: this.dataForm.id,
                  name: this.dataForm.name,
                  text: this.content,
                  phone: this.dataForm.phone,
                  sfsj: this.dataForm.sfsj,
                  sfzs: this.dataForm.sfzs,
                  url: this.dataForm.url,
                  jj:this.dataForm.jj
                })
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                    onClose: () => {
                      this.imagesList = []
                      this.fileList3 = []
                      this.imageUrl = ''
                      this.$refs.upload.clearFiles();
                      this.visible = false;
                      this.$emit("refreshDataList");
                    }
                  });
                } else {
                  this.$message.error(data.msg);
                }
              });
            }
          }
        });
      }
    }
  };
  </script>
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
  